<template>
	<view class="container">
		
		<view class="banner">
			<image src="https://img-shop.qmimg.cn/s23107/2020/04/26/3eb7808bf105262604.jpg" mode="" class="bg"></image>
			<view class="intro">
				<view class="greet">您好</view>
				<view class="note">一马当先,万马无光,帝皇餐厅为您服务</view>
			</view>
		</view>
		<view class="content">
			<view class="entrance">
				<view class="item" @tap="takein">
					<image src="/static/logo.png" class="icon"></image>
					<view class="title">自取</view>
				</view>
				<view class="item" @tap="takein">
					<image src="/static/logo.png" class="icon"></image>
					<view class="title">外卖</view>
				</view>
			</view>
			<view class="info">
				<view class="integral_section" @tap="integrals">
					<view class="top">
						<text class="title">我的积分</text>
						<text class="value">411</text>
					</view>
					<view class="bottom">
						进入积分商城兑换周边好礼
						<view class="iconfont iconarrow-right"></view>
					</view>
				</view>
				<view class="qrcode_section" @tap="memberCode">
					
					<text>会员码</text>
				</view>
			</view>
			
			
		</view>
		
		<span class="service-title">活动列表</span>
		
		
		<div class="swipe-container">
		   <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" >
		     <van-swipe-item v-for="(image, index) in images" :key="index">
		       <img :src="image" alt="Swipe Image" />
		     </van-swipe-item>
		   </van-swipe>
		 </div>
		
	</view>
	
</template>

<script setup>
	import { mapState, mapGetters } from 'vuex';
	import { onMounted, ref } from 'vue';

	import aa from '@/static/aa.jpg';
	import bb from '@/static/bb.jpg';
	import cc from '@/static/cc.jpg';
	
	const images = ref([
	  aa,
	  bb,
	  cc,
	]);
	function takein(){
	  console.log(123)
	  uni.switchTab({
	         url: '/pages/food/food'
	       });
	}
	
	
	
	onMounted(() => {

	});

</script>


<style lang="scss" scoped>
	
  .service-title {
    font-size: 32rpx; /* 文字大小 */
    font-weight: bold; /* 加粗 */
    margin-bottom: 10px; /* 与轮播图之间的间距 */
    margin-left: 36rpx;
    
  }	

  page {
  	height: auto;
  	min-height: 100%;
  }	
	
  .banner {
  	position: relative;
  	width: 100%;
  	height: 600rpx;
  	
  	.bg {
  		width: 100%;
  		height: 600rpx;
  	}
  	
  	.intro {
  		position: absolute;
  		top: calc(50rpx + var(--status-bar-height));
  		left: 40rpx;
  		color: #FFFFFF;
  		display: flex;
  		flex-direction: column;
  		
  		
  	}
  }
  .swipe-container {
    margin-left: 20px; /* 外边距 */
    margin-right: 20px; /* 外边距 */
    margin-top: 20rpx;
	
	
    
  }
  
  .my-swipe .van-swipe-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px; /* 根据需要调整高度 */
    margin-bottom: 100rpx;
	
  }
  
  .my-swipe .van-swipe-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .contenter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .content {
  	padding: 0 30rpx;
  }
  .entrance {
  	position: relative;
  	margin-top: -80rpx;
  	margin-bottom: 30rpx;
  	border-radius: 10rpx;
  	background-color: #ffffff;
  	box-shadow: #8f8f94;
  	padding: 30rpx 0;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	
  	.item {
  		flex: 1;
  		display: flex;
  		flex-direction: column;
  		justify-content: center;
  		align-items: center;
  		position: relative;
  		
  		&:nth-child(1):after {
  			content: '';
  			position: absolute;
  			width: 1rpx;
  			background-color: #ddd;
  			right: 0;
  			height: 100%;
  			transform: scaleX(0.5) scaleY(0.8);
  		}
  		
  		.icon {
  			width: 84rpx;
  			height: 84rpx;
  			margin: 20rpx;
  		}
  		
  		.title {
  			font-size: 30rpx;
  			
  			font-weight: 600;
  		}
  	}
  }
  
  .info {
  	position: relative;
  	margin-bottom: 30rpx;
  	border-radius: 10rpx;
  	background-color: #ffffff;
  	
  	padding: 30rpx;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	
  	.integral_section {
  		flex: 1;
  		display: flex;
  		flex-direction: column;
  		justify-content: center;
  		
  		.top {
  			display: flex;
  			align-items: center;
  			
  			.title {
  				
  				margin-right: 10rpx;
  			}
  			.value {
  				font-size: 44rpx;
  				font-weight: bold;
  			}
  		}
  		
  		.bottom {
  		
  			display: flex;
  			align-items: center;
  		}
  	}
  	
  	.qrcode_section {
  		
  		display: flex;
  		flex-direction: column;
  		align-items: center;
  		justify-content: center;
  		
  		
  		image {
  			width: 40rpx;
  			height: 40rpx;
  			margin-bottom: 10rpx;
  		}
  	}
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
</style>
